import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'umi';
import { Table, Button, Tooltip } from 'antd';
import styles from './index.less';
import CreatEditDepartment from './creatEditDepartment';
import CreatCompanyModel from './creatCompanyModel';
import { getCenterEllipsis } from 'enoad-component-web/dist/src/core/util';
import moment from 'moment';

/**
 * 用户管理界面。这里可以进行用户的新建、编辑、删除。可以给用户分配角色
 * 列表展示数据库中所有用户。账户和密码都会进行展示。
 * @param props
 * @returns
 */
const Department = (props: any) => {
  const { dispatch, loading, departSource } = props;

  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const [createDepart, setCreateDepart] = useState(false); //新建用户的弹窗model。
  const [editDepart, setEditDepart] = useState({}); //新建用户的弹窗model。

  const [visitCompany, setVisitCompany] = useState(false); //公司model

  const columns = [
    {
      title: '部门名称',
      dataIndex: 'departName',
      render: (_, item) => {
        return (
          <div
            onClick={() => {
              //编辑该用户
              openEditDepart(item);
            }}
          >
            <Tooltip title={item.departName}>
              {getCenterEllipsis(item.departName, 10, 6, 6)}
            </Tooltip>
          </div>
        );
      },
    },
    {
      title: '部门编号',
      dataIndex: 'departId',
    },
    {
      title: '上级部门',
      dataIndex: 'departParentId',
      render: (_, item) => {
        let parent = item.departParentId;
        if (parent) {
          parent = JSON.parse(parent);
          return (
            <div>
              <Tooltip title={parent.name}>
                {getCenterEllipsis(parent.name, 10, 6, 6)}
              </Tooltip>
            </div>
          );
        }
      },
    },
    {
      title: '创建时间',
      dataIndex: 'departCreateTime',
      render: (_, item) => {
        return (
          <div>
            {moment(item.departCreateTime).format('YYYY-MM-DD HH:mm:ss')}
          </div>
        );
      },
    },
    {
      title: '创建人',
      dataIndex: 'departCreateBy',
      render: (_, item) => {
        let departCreateBy = item.departCreateBy;
        if (departCreateBy) {
          departCreateBy = JSON.parse(departCreateBy);
          return (
            <div>
              <Tooltip title={departCreateBy.name}>
                {getCenterEllipsis(departCreateBy.name, 10, 6, 6)}
              </Tooltip>
            </div>
          );
        }
      },
    },
    {
      title: '更新时间',
      dataIndex: 'departUpdateTime',
      render: (_, item) => {
        return (
          <div>
            {moment(item.departUpdateTime).format('YYYY-MM-DD HH:mm:ss')}
          </div>
        );
      },
    },
    {
      title: '更新人',
      dataIndex: 'departUpdateBy',
      render: (_, item) => {
        let departUpdateBy = item.departUpdateBy;
        if (departUpdateBy) {
          departUpdateBy = JSON.parse(departUpdateBy);
          return (
            <div>
              <Tooltip title={departUpdateBy.name}>
                {getCenterEllipsis(departUpdateBy.name, 10, 6, 6)}
              </Tooltip>
            </div>
          );
        }
      },
    },
  ];

  const fetchDepartsData = () => {
    dispatch({ type: 'enoadRBAC/fetchDepartsData', payload: {} });
  };

  useEffect(() => {
    fetchDepartsData();
  }, []);

  const createDeparts = () => {
    setEditDepart({});
    setCreateDepart(true);
  };

  const createCompany = () => {
    setVisitCompany(true);
  };

  const openEditDepart = (item) => {
    setEditDepart(item);
    setCreateDepart(true);
  };

  const deleteUser = () => {
    dispatch({
      type: 'enoadRBAC/deleteDepart',
      payload: { ids: selectedRowKeys },
    }).then((res) => {
      if (res) {
        setSelectedRowKeys([]);
        fetchDepartsData();
      }
    });
  };

  const rowSelection = {
    checkStrictly: false,
    selectedRowKeys,
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRowKeys);
    },
  };
  const hasSelected = selectedRowKeys.length > 0;
  return (
    <>
      {hasSelected ? (
        <div className={styles.selectView}>
          <div>
            <span
              style={{
                fontSize: '16px',
                marginRight: '10px',
                fontWeight: 'bold',
              }}
            >
              {'部门信息'}
            </span>
            <span>{`已经选中${selectedRowKeys.length}项`}</span>
          </div>
          <div>
            <Button
              className={styles.buttonType}
              type="primary"
              onClick={deleteUser}
              loading={loading.effects['enoadRBAC/deleteUser']}
            >
              {'删除'}
            </Button>
          </div>
        </div>
      ) : (
        <div className={styles.selectView}>
          <span
            style={{
              fontSize: '16px',
              marginRight: '10px',
              fontWeight: 'bold',
            }}
          >
            {'部门信息'}
          </span>
          <div>
            <Button
              className={styles.buttonType}
              type="primary"
              onClick={createDeparts}
              loading={loading.effects['enoadRBAC/createDepart']}
            >
              {'新建部门'}
            </Button>

            {visitCompany && <Button
              className={styles.buttonType}
              type="primary"
              onClick={createCompany}
            >
              {'分配新公司'}
            </Button>}
          </div>
        </div>
      )}

      <Table
        loading={loading.effects['enoadRBAC/fetchDepartsData']}
        rowSelection={rowSelection}
        columns={columns}
        dataSource={departSource}
      />
      {createDepart && (
        <CreatEditDepartment
          createDepart={createDepart}
          setCreateDepart={setCreateDepart}
          fetchDepartsData={fetchDepartsData}
          depart={editDepart}
        />
      )}
      {visitCompany && (
        <CreatCompanyModel
          visitCompany={visitCompany}
          setVisitCompany={setVisitCompany}
        />
      )}
    </>
  );
};
//关联到用户权限管理state的models中。
export default connect(({ enoadRBAC, loading }) => ({
  ...enoadRBAC,
  loading,
}))(Department);
